<template>
  <div class="funacetemp">
    <div class="wrapper">
      <div class="header">
        <el-form :inline="true" size="small" label-width="84px">
          <div>
            <el-form-item label="位置">
              <el-cascader
                v-model="spacesModel"
                :props="spaceProps"
                :options="options"
                clearable
                @change="onChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="设备：">
              <el-select v-model="search.eid" placeholder="请选择">
                <el-option
                  v-for="item in equips"
                  :key="item.equipmentID"
                  :label="item.name"
                  :value="item.equipmentID"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="getDtSources">查询</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <el-card style="margin-bottom: 30px">
        <div class="linechart">
          <line-chart :data="datas"></line-chart>
        </div>
      </el-card>

      <el-tabs type="border-card">
        <el-tab-pane label="制程工艺">
          <div class="eltable">
            <el-table
              style="width: 100%"
              row-key="id"
              border
              :header-cell-style="{ 'background-color': '#EEEEEE' }"
              :data="processAnaInfo"
            >
              <el-table-column
                prop="channelName"
                width="160"
                label="通道"
              >
              </el-table-column>
              <el-table-column
                prop="upLimitValue"
                label="上升斜率(℃/sec)(0~165℃)"
                show-overflow-tooltip
              >
              <template slot-scope="scope">
                <div class="eltable">
                  <div class="elrow">{{scope.row.downLimitValue}}</div>
                  <div class="elrow">{{scope.row.upLimitValue}}</div>
                </div>
              </template></el-table-column>
              <el-table-column
                prop="upLimitWarningValue"
                label="预热时间(sec)(165~217℃)"
                show-overflow-tooltip
              >
              <template slot-scope="scope">
                <div class="eltable">
                  <div class="elrow">{{scope.row.downLimitWarningValue}}</div>
                  <div class="elrow">{{scope.row.upLimitWarningValue}}</div>
                </div>
              </template></el-table-column>
              <el-table-column
                prop="upLimitAlarmValue"
                label="恒温时间(sec)(217~250℃)"
                show-overflow-tooltip
              >
              <template slot-scope="scope">
                <div class="eltable">
                  <div class="elrow">{{scope.row.downLimitAlarmValue}}</div>
                  <div class="elrow">{{scope.row.upLimitAlarmValue}}</div>
                </div>
              </template></el-table-column>
              <!-- <el-table-column
                prop="backflow"
                label="回流时间(sec)(250~280℃)"
                show-overflow-tooltip
              ></el-table-column> -->
              <el-table-column
                prop="upLimitSMEMAValue"
                label="最高温度(℃)(≥280℃)"
                show-overflow-tooltip
              >
              <template slot-scope="scope">
                <div class="eltable">
                  <div class="elrow">{{scope.row.downLimitSMEMAValue}}</div>
                  <div class="elrow">{{scope.row.upLimitSMEMAValue}}</div>
                </div>
              </template></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="炉温温区">
          <div class="eltable">
            <el-table
              style="width: 100%"
              row-key="id"
              border
              :header-cell-style="{ 'background-color': '#EEEEEE' }"
              :span-method="arraySpanMethod"
              :data="zoneAnaInfo"
            >
              <el-table-column
                prop="temperature"
                width="160"
                label="℃"
              ></el-table-column>
              <el-table-column
                prop="temparea"
                label="温区1"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="temparea"
                label="温区2"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="temparea"
                label="温区3"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="temparea"
                label="温区4"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="temparea"
                label="温区5"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="temparea"
                label="温区6"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="temparea"
                label="温区7"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="temparea"
                label="温区8"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="temparea"
                label="温区9"
                show-overflow-tooltip
              ></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import LineChart from "./components/LineChart";

export default {
  components: { LineChart },
  name: "funacetemp",
  data() {
    return {
      spacesModel: [],
      spaceProps: {
        lazy: false,
        checkStrictly: true
      },
      search: {
        sid: 0,
        eid: '',
        seq: 0,
      },
      datas: {
        xdata: [0],
        ydata: [0],
      },
      processAnaInfo: [],
      zoneAnaInfo: [],
    }
  },
  computed: {
    dtsources() {
      return this.$store.state.datainterface.dtsources
    },
    options() {
      return this.$store.state.space.options
    },
    equips() {
      return this.$store.state.equipment.equips
    },
  },
  methods: {
    async getDtSources() {
      if (this.search.eid) {
        await this.$store.dispatch('datainterface/getDTSource', { eid: 15129, seq: 51379 })
        console.log(this.dtsources)
        this.datas.xdata = [0]
        this.datas.ydata = [0]
        this.dtsources.furnaces.forEach(e => {
          this.datas.xdata.push(e.tcIndex)
          this.datas.ydata.push(e.tcTempValue)
        })
        this.processAnaInfo = this.dtsources.processAnaInfo
        this.zoneAnaInfo = this.dtsources.zoneAnaInfo
      }
    },
    async onChange(val) {
      if (val.length > 0) {
        this.search.sid = val[val.length - 1]
        await this.$store.dispatch('equipment/getEquips', { page: 0, size: 0, spaceId: this.search.sid })
      }
    },
    arraySpanMethod({ row, col, rowIndex, colIndex }) {
    },
  },
  created() {},
  mounted() {
    this.$store.dispatch('space/GetSpaces', { name: '', parentid: '', page: 0, size: 0 })
  },
  destroyed() {},
};
</script>

<style lang="scss" scoped>
.funacetemp {
  width: 100%;
  padding: 30px;
  .header {
    margin-bottom: 10px;
  }
  .content .datainfo {
    margin-bottom: 20px;
    .dataitem {
      display: inline-block;
      margin-right: 20px;
      font-size: 14px;
    }
  }
  .linechart {
    height: 360px;
    padding: 0 10px;
  }
  .el-table {
	  width: 100%;
    >>> .el-table__body-wrapper {
      max-height: 300px;
    }
  }
  .eltable {
    display: flex;
    flex-direction: row;
    .elrow {
      flex: 1;
    }
  }
}
</style>